<template>
  <!--  elementplus响应是布局-->
  <el-row>
    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
      <div class="card1">111</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
      <div class="card2">222</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
      <div class="card3">333</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
      <div class="card4">444</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Xiangying"
}
</script>

<style scoped>
.card1 {
  background-color: yellowgreen;
  height: 200px;
  width: 100%;
}

.card2 {
  background-color: red;
  height: 200px;
  width: 100%;
}

.card3 {
  background-color: black;
  height: 200px;
  width: 100%;
}

.card4 {
  background-color: blueviolet;
  height: 200px;
  width: 100%;
}
</style>